<template>
  <div v-cloak>
    <el-row :gutter="32">
      <!-- 左边部分 -->
      <el-col :lg="8">
        <div class="ml20 mt40">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="" prop="userName">
              <el-input v-model="queryParams.userName" placeholder="搜索姓名或者手机号" style="width: 280px;" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="add">新增学员</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="ml20 mt20">
          <el-tabs v-model="activeName" @tab-click="tabschange">
            <el-tab-pane label="在读学员" name="在读学员"></el-tab-pane>
            <el-tab-pane label="历史学员" name="历史学员"></el-tab-pane>
            <el-tab-pane label="潜在学员" name="潜在学员"></el-tab-pane>

          </el-tabs>
          <div v-if="activeName=='在读学员'">
            <div class="classflex-space-between " style="background-color: #ffffff;height: 50px;">
              <div class="ml20">
                共{{total}}名学员
              </div>
              <div class="classflex-left">
                <div class="mr20" @click="moren">
                  默认
                </div>
                <div class="mr20">
                  |
                </div>
                <div class="mr20"@click="shengyu">
                  剩余课时
                </div>
              </div>

            </div>
            <div class="wrapper">
              <div v-if="studentList.length==0">
                <div class="classflex-center" style="flex-direction: column;">
                  <div class=" image-container  mt60 ">
                    <img :src="nocourse" alt="logo">
                  </div>

                  <div class="mt20">
                    暂无此类学员
                  </div>

                </div>

              </div>
              <div v-else class="   hovercolor stylecard mt10 " :class="selectedIndex1 == index ? 'changecolor':''"
                v-for="(item,index) in studentList" :key="item.id" @click="GetMessage(1,index,item)">

                <div class="classflex-left  mb20 pd10 mt10 ml10">
                  <div>
                    <img src="@/assets/touxiang.png" alt="">
                  </div>
                  <div class="ml20">
                    <div class=" text-black text-size-20  " :class="selectedIndex1 == index ? 'text-green':''">
                      {{item.userName}}
                    </div>
                    <div class="text-gray text-size-14  mt10">剩余{{item.remainingClassHours}}课时</div>
                  </div>
                </div>

              </div>
            </div>
            <div style="height: 20px;">
              <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>


          </div>
          <div v-else-if="activeName=='历史学员'">
            <div class="classflex-space-between " style="background-color: #ffffff;height: 50px;">
              <div class="ml20">
                共{{total}}名学员
              </div>
              <div class="mr20">
                所有课程均已结课学员
              </div>
            </div>
            <div class="wrapper">
              <div v-if="studentList.length==0">
                <div class="classflex-center" style="flex-direction: column;">
                  <div class=" image-container  mt60 ">
                    <img :src="nocourse" alt="logo">
                  </div>

                  <div class="mt20">
                    暂无此类学员
                  </div>

                </div>

              </div>

              <div v-else class="   hovercolor stylecard mt10 " :class="selectedIndex2 == index ? 'changecolor':''"
                v-for="(item,index) in studentList" :key="item.id" @click="GetMessage(2,index,item)">
                <div class="classflex-left  mb20 pd10 mt10 ml10">
                  <div>
                    <img src="@/assets/touxiang.png" alt="">
                  </div>
                  <div class="ml20">
                    <div class=" text-black text-size-20  " :class="selectedIndex2 == index ? 'text-green':''">
                      {{item.userName}}
                    </div>
                    <div class="text-gray text-size-14  mt10">剩余{{item.remainingClassHours}}课时</div>
                  </div>
                </div>

              </div>
            </div>
            <div style="height: 20px;">
              <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
            </div>

          </div>
          <div v-else="activeName=='潜在学员'">
            <div class="classflex-space-between " style="background-color: #ffffff;height: 50px;">
              <div class="ml20">
                共{{total}}名学员
              </div>
              <div class="mr20">
                未报名过任何课程的学员
              </div>
            </div>
            <div class="wrapper">

              <div v-if="studentList.length==0">
                <div class="classflex-center" style="flex-direction: column;">
                  <div class=" image-container  mt60 ">
                    <img :src="nocourse" alt="logo">
                  </div>

                  <div class="mt20">
                    暂无此类学员
                  </div>

                </div>

              </div>
              <div v-else class="   hovercolor stylecard mt10 " :class="selectedIndex3 == index ? 'changecolor':''"
                v-for="(item,index) in studentList" :key="item.id" @click="GetMessage(3,index,item)">
                <!-- <el-card shadow="always"> -->

                <div class="classflex-left  mb20 pd10 mt10 ml10">
                  <div>

                    <img src="@/assets/touxiang.png" alt="">
                  </div>
                  <div class="ml20">
                    <div class=" text-black text-size-20  " :class="selectedIndex3 == index ? 'text-green':''">
                      {{item.userName}}
                    </div>
                    <div class="text-gray text-size-14  mt10">剩余{{item.remainingClassHours}}课时</div>
                  </div>
                </div>

              </div>
            </div>
            <div style="height: 20px;">
              <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
              <!--  <el-pagination background layout="prev, pager, next" :total="1000">
              </el-pagination> -->
            </div>
          </div>


        </div>


      </el-col>
      <el-col :lg="16" v-if="!rightshow" style="height: 600px">
        <div class="classflex-center" style="height: 100%;">
          请点击要查看的学员
        </div>
      </el-col>

      <!-- 右边部分 -->
      <el-col :lg="16">
        <div class="xian" v-if="rightshow">
          <div>

            <!-- 右面上半部分 -->
            <div class="righttop ">

              <el-row :gutter="32">
                <el-col :lg="7">
                  <div class="classflex-left mt30 ml30">
                    <div>
                      <!-- <el-avatar :size="size" :src="circleUrl"></el-avatar> -->
                      <img src="@/assets/touxiang.png" alt="">
                    </div>
                    <div class="ml20">
                      <div class=" text-black text-size-20  ">{{nowstudent.userName }}</div>
                      <div class="text-gray text-size-14  mt10">累计学习{{nowstudent.accumulatedLearningHours||"0" }}课时
                      </div>

                    </div>
                  </div>


                </el-col>
                <el-col :lg="16">
                  <div class="classflex-center mt50">
                    <el-button icon="el-icon-user" @click="DoSometing(1)">续费提醒</el-button>
                    <el-button icon="el-icon-star-off" @click="DoSometing(2)">报名续课</el-button>
                    <el-button icon="el-icon-goods" @click="DoSometing(3)">记录成长</el-button>
                    <el-button icon="el-icon-help" @click="DoSometing(4)">上课记录</el-button>
                    <el-button icon="el-icon-picture-outline" @click="DoSometing(5)">课表</el-button>
                    <el-button icon="el-icon-bell" @click="DoSometing(6)">订单</el-button>


                  </div>

                </el-col>
              </el-row>


            </div>
          </div>
          <el-divider></el-divider>
          <!-- 右面下半部分 -->
          <el-row>
            <!-- 右面下左部分 -->
            <el-col :span="8">
              <div class="classflex-space-between ml20 ">
                <div class="text-size-16" style="font-weight: 700;">基础资料</div>
                <div style="color: darkgreen;" @click="edit"><i class="el-icon-edit"></i>编辑</div>

              </div>
              <div class="mt20">

                <div class=" classflex-space-between  ml20">
                  <div class="  text-gray text-size-16  ">联系电话</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.phonenumber||"未设置" }}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">学号</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.studentId||"未设置"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">性别</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.sex||"未知"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">就读学校</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.school||"未完善"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">就读年级</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.grade||"未完善"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">家庭住址</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.address||"未完善"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">招生渠道</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.enrollmentChannels||"未知渠道"}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">添加时间</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.createTime}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">添加人</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.createBy}}</div>

                </div>
                <div class=" classflex-space-between  ml20 mt30">
                  <div class="  text-gray text-size-16  ">备注</div>
                  <div class="text-black text-size-16    mr80">{{nowstudent.remark||"未填写"}}</div>

                </div>
                <div class="classflex-center mt30">
                  <el-button icon="el-icon-delete" style="width: 300px;" @click="handleDelete(nowstudent.id)">删除学员
                  </el-button>
                </div>

              </div>
            </el-col>
            <!-- 右面下右部分 -->
            <el-col :span="16">
              <div class="ml20 mt20">
                <el-tabs v-model="rightName" @tab-click="handleClick">
                  <el-tab-pane label="报读课程" name="baodu"></el-tab-pane>
                  <el-tab-pane label="成长·点评" name="chengzhang"></el-tab-pane>
                  <el-tab-pane label="跟进记录" name="genjin"></el-tab-pane>

                </el-tabs>
                <div v-if="rightName=='baodu'">
                  <div v-if="isLoading" class="classflex-center">
                    <el-spinner>正在加载</el-spinner>
                  </div>

                  <div v-else>
                    <div v-if="orderList.length==0">
                      <div class="classflex-center" style="flex-direction: column;">
                        <div class=" image-container  mt60 ">
                          <img :src="nocourse" alt="logo">
                        </div>
                        <div class="mt20">
                          TA还没有报读任何课程哦~
                        </div>
                        <div class="mt20">
                          学员报名成功后,您可以在此进行查看和操作！
                        </div>
                        <div class="mt20">
                          <el-button type="primary" @click="DoSometing(2)">办理报名</el-button>
                        </div>
                      </div>

                    </div>
                    <div v-else class="classflex-space-between mt20 " v-for="item in orderList"
                      :key="item.id">

                      <div class="ml20">
                        <div class=" text-green text-size-20  ">{{item.orderCourse}}</div>
                        <div class="text-gray text-size-14  mt10">
                          剩余{{item.residue }}课时，已消耗{{item.consumed}}课时</div>

                      </div>
                      <div class="ml20 classflex-left">
                        <div class=" text-green text-size-14  " @click="GoOrderPage(item.userCourse)">查看订单</div>
                        <div class="text-black text-size-14    ml20 mr20">结课</div>

                      </div>


                    </div>
                  </div>




                </div>
                <div v-else-if="rightName=='chengzhang'">2</div>
                <div v-else="rightName=='genjin'">3</div>


              </div>

            </el-col>
          </el-row>
        </div>
      </el-col>

    </el-row>
    <add-student-drawer class="" ref="StudentDrawer" @AddStuentSuccess="addStuentSuccess">

    </add-student-drawer>
    <add-order-drawer class="" ref="OrderDrawer" @AddOrderSuccess="addOrderSuccess">

    </add-order-drawer>

    <edit-student-drawer class="" ref="EditStudentDrawer" @EditStudentDrawer="EditStudentDrawerScuess">

    </edit-student-drawer>

    <el-dialog title="是否确认发送微信提醒？" :visible.sync="dialogVisible" width="30%">
      <span>发送后，系统将通过微信向学员发送续费提醒消息，每天只能发送一次</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import AddStudentDrawer from '@/components/AddStudentDrawer'
  import AddOrderDrawer from '@/components/AddOrderDrawer'
  import EditStudentDrawer from '@/components/EditStudentDrawer'
  import nocourse from '@/assets/logo/nocourse.png'
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listCoursestatistics,
    getCoursestatistics,
    delCoursestatistics,
    addCoursestatistics,
    updateCoursestatistics
  } from "@/api/coursestatistics/coursestatistics";

  export default {
    name: "Student",
    components: {
      AddStudentDrawer,
      AddOrderDrawer,
      EditStudentDrawer

    },
    dicts: ['sys_oper_type', 'student_relationship', 'student_state', 'student_sex', 'enrollment_channels',
      'student_grade'
    ],
    data() {
      return {
        totalClassHours: 0,
        rightshow: false,
        nocourse: nocourse,
        circleUrl: "",
        dialogVisible: false,
        list: [{
          id: 0,
          name: "在读学员人数",
          num: "111",
        }, {
          id: 1,
          name: "历史学员人数",
          num: "111",
        }, {
          id: 2,
          name: "潜在学员人数",
          num: "111",
        }, {
          id: 3,
          name: "即将到期学员",
          num: "111",
        }, {
          id: 4,
          name: "欠费代缴学员",
          num: "111",
        }, {
          id: 5,
          name: "本月生日学员",
          num: "111",
        }],
        activeName: '在读学员',
        rightName: 'baodu',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 学生信息表格数据
        studentList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层

        type: true,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        nowstudent: {},
        queryParamsCoursestatistics: {},
        // nowstudent :[]

        selectedIndex1: 0,
        selectedIndex2: 2,
        selectedIndex3: 3,
        url: "",
        isLoading: false,
        queryOrderParams:{},
        orderList:[]
      };
    },
    created(e) {



    },
    mounted() {
      if (this.$route.query.type != null) {
        this.activeName = this.$route.query.type;
          this.queryParams.userState = this.$route.query.type;
      }else{
          this.queryParams.userState = "在读学员";
      }
     
      if (this.$route.query.userName != null) {

        this.queryParams.userName = this.$route.query.userName
      }
  //     if (this.$route.query.userState != null) {
  // console.log("111" + this.$route.query.userName);
  //       this.queryParams.userState = this.$route.query.userState
  //     }else{
  //         console.log("222" + this.$route.query.userName);
  //        this.queryParams.userState = "在读学员";
  //     }

      this.getList();
    },


    methods: {
      moren(){
          this.queryParams.remark10 = "";
        this.getList();
      },
      shengyu(){
         this.queryParams.remark10 = "1";
         this.getList();

      },

      /** 查询课程统计列表 */
      getOrder() {


        this.queryOrderParams.studentId = this.nowstudent.id;
        this.queryOrderParams.deptId = this.$store.state.user.deptId;
        listOrder(this.queryOrderParams).then(response => {
          this.orderList = response.rows;

        });

      },


      addOrderSuccess() {
        this.activeName = "在读学员";
        this.queryParams.userState = "在读学员";
        this.getList();
        this.getOrder();
      },

      GoOrderPage(item) {
        var url = "/bigdata/order";
        this.$router.push({
          path: url,
          query: {
            name: this.nowstudent.userName,
            orderCourse: item,

          }
        })
      },

      tabschange(tab, event) {
        // console.log(tab.name);
        if (tab.name == "在读学员") {
          this.queryParams.userState = "在读学员";
        } else if (tab.name == "历史学员") {
          this.queryParams.userState = "历史学员";
        } else if (tab.name == "潜在学员") {
          this.queryParams.userState = "潜在学员";
        }
        this.getList();

      },

      search() {
        this.getList();

      },
      EditStudentDrawerScuess() {
        this.getList();
      },
      addStuentSuccess() {
        this.activeName = "潜在学员";
        this.queryParams.userState = "潜在学员";
        this.getList();
      },
      DoSometing(num) {
        var url = "";
        switch (num) {
          case 1:


            this.dialogVisible = true

            break;
          case 2:
            // url = "/course/course";

            this.$refs.OrderDrawer.open(this.nowstudent.userName);

            break;
          case 3:
            // url = "/order/order";


            break;
          case 4:
            //跳到上课记录
            // this.$refs.SchedulingDrawer.open();
            url = "/bigdata/classrecords";
            this.$router.push({
              path: url,
              query: {
                name: this.nowstudent.userName,

              }
            })

            break;
          case 5:
            url = "/scheduling/scheduling";
            this.$router.push({
              path: url,
              query: {
                name: this.nowstudent.userName,

              }
            })
            break;
          case 6:
            url = "/bigdata/order";
            this.$router.push({
              path: url,
              query: {
                name: this.nowstudent.userName,

              }
            })
            break;

          default:

        }





      },
      GetMessage(type, index, item) {
        if (type == 1) {
          this.selectedIndex1 = index;
          this.totalClassHours = item.totalClassHours;
        } else if (type == 2) {
          this.selectedIndex2 = index;
        } else if (type == 3) {
          this.selectedIndex3 = index;
        }
        this.rightshow = true;

        this.nowstudent = {};
        getStudent(item.id).then(response => {
          this.nowstudent = response.data;
          this.getOrder();
        });

      },
      add() {
        this.$refs.StudentDrawer.open();
      },
      edit() {
        // this.$nextTick(() => {
        this.$refs.EditStudentDrawer.openbyid(parseInt(this.nowstudent.id));
        // });


      },


      handleClick(tab, event) {
        console.log(tab, event);
      },
      piliang() {

        this.type = false;
      },
      danyi() {

        this.type = true;
      },
      /** 查询学生信息列表 */
      getList() {
        this.loading = true;
        this.queryParams.deptId = this.$store.state.user.deptId;
        listStudent(this.queryParams).then(response => {
          this.studentList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },


      // 表单重置
      reset() {
        this.form = {
          id: null,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          delFlag: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },






      /** 删除按钮操作 */
      handleDelete(id) {
        // const ids = row.id || this.ids;
        const ids = id;
        if (this.nowstudent.remainingClassHours > 0) {
          this.$modal.msgError("先操作退费或者取消订单才能进行删除操作！");
        } else {
          this.$modal.confirm('是否确认删除此学生？').then(function() {
            console.log("2");
            return delStudent(ids);

          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        }

      },

    }
  };
</script>

<style lang="scss" scoped>
  .righttop {
    height: 130px;
    // background-color: red;

  }


  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/4);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }

  .wrapper {
    // width: 300px;
    height: 550px;
    overflow: auto;
    /* 滚动条设置 */
    // margin: 20px;
    // border: 1px solid #ccc;
    // padding: 10px;
  }

  .image-container {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    width: 150px;
    height: 180px;
    /* 设置容器宽度 */
  }

  .image-container img {
    max-width: 100%;
    /* 最大宽度为容器宽度 */
    height: auto;
    /* 高度自适应 */
  }

  [v-cloak] {
    display: none !important;
  }
</style>
